import React, { useState } from 'react';
import { 
  Card, 
  Row, 
  Col, 
  Statistic, 
  Select, 
  DatePicker,
  Table,
  Progress
} from 'antd';
import { 
  UserOutlined,
  EyeOutlined,
  HeartOutlined,
  MessageOutlined,
  ShareAltOutlined
} from '@ant-design/icons';
// import { Line, Column, Pie } from '@ant-design/plots';
import dayjs from 'dayjs';

const { Option } = Select;
const { RangePicker } = DatePicker;

interface AnalyticsData {
  date: string;
  followers: number;
  posts: number;
  likes: number;
  comments: number;
  shares: number;
}

interface TopPost {
  id: string;
  title: string;
  likes: number;
  comments: number;
  shares: number;
  engagementRate: number;
  publishDate: string;
}

const Analytics: React.FC = () => {
  const [selectedAccount, setSelectedAccount] = useState('all');
  const [dateRange, setDateRange] = useState<[string, string]>(['2024-01-01', '2024-01-31']);

  // 模拟数据
  const analyticsData: AnalyticsData[] = [
    { date: '2024-01-01', followers: 1200, posts: 5, likes: 150, comments: 25, shares: 10 },
    { date: '2024-01-02', followers: 1250, posts: 3, likes: 180, comments: 30, shares: 15 },
    { date: '2024-01-03', followers: 1300, posts: 4, likes: 200, comments: 35, shares: 12 },
    { date: '2024-01-04', followers: 1350, posts: 6, likes: 220, comments: 40, shares: 18 },
    { date: '2024-01-05', followers: 1400, posts: 2, likes: 160, comments: 28, shares: 8 },
    { date: '2024-01-06', followers: 1450, posts: 5, likes: 240, comments: 45, shares: 20 },
    { date: '2024-01-07', followers: 1500, posts: 4, likes: 210, comments: 38, shares: 16 },
  ];

  const topPosts: TopPost[] = [
    {
      id: '1',
      title: '春季护肤攻略',
      likes: 1250,
      comments: 89,
      shares: 45,
      engagementRate: 8.5,
      publishDate: '2024-01-15'
    },
    {
      id: '2',
      title: '美妆产品推荐',
      likes: 980,
      comments: 67,
      shares: 32,
      engagementRate: 7.2,
      publishDate: '2024-01-14'
    },
    {
      id: '3',
      title: '旅行日记分享',
      likes: 756,
      comments: 45,
      shares: 28,
      engagementRate: 6.8,
      publishDate: '2024-01-13'
    }
  ];

  // 图表配置暂时注释掉，等待图表库集成
  // const followersConfig = { ... };
  // const engagementConfig = { ... };
  // const categoryConfig = { ... };

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: '40%',
    },
    {
      title: '点赞数',
      dataIndex: 'likes',
      key: 'likes',
      render: (value: number) => value.toLocaleString(),
    },
    {
      title: '评论数',
      dataIndex: 'comments',
      key: 'comments',
      render: (value: number) => value.toLocaleString(),
    },
    {
      title: '分享数',
      dataIndex: 'shares',
      key: 'shares',
      render: (value: number) => value.toLocaleString(),
    },
    {
      title: '互动率',
      dataIndex: 'engagementRate',
      key: 'engagementRate',
      render: (value: number) => (
        <div>
          <div style={{ color: value >= 7 ? '#52c41a' : value >= 5 ? '#faad14' : '#ff4d4f' }}>
            {value}%
          </div>
          <Progress 
            percent={value * 10} 
            size="small" 
            strokeColor={value >= 7 ? '#52c41a' : value >= 5 ? '#faad14' : '#ff4d4f'}
            showInfo={false}
          />
        </div>
      ),
    },
    {
      title: '发布日期',
      dataIndex: 'publishDate',
      key: 'publishDate',
    },
  ];

  const totalFollowers = analyticsData[analyticsData.length - 1]?.followers || 0;
  const totalPosts = analyticsData.reduce((sum, item) => sum + item.posts, 0);
  const totalLikes = analyticsData.reduce((sum, item) => sum + item.likes, 0);
  const totalComments = analyticsData.reduce((sum, item) => sum + item.comments, 0);
  const totalShares = analyticsData.reduce((sum, item) => sum + item.shares, 0);

  const followersGrowth = ((analyticsData[analyticsData.length - 1]?.followers || 0) - (analyticsData[0]?.followers || 0)) / (analyticsData[0]?.followers || 1) * 100;

  return (
    <div>
      {/* 筛选器 */}
      <Card style={{ marginBottom: 24 }}>
        <Row gutter={16} align="middle">
          <Col span={6}>
            <span style={{ marginRight: 8 }}>账号:</span>
            <Select
              value={selectedAccount}
              onChange={setSelectedAccount}
              style={{ width: 200 }}
            >
              <Option value="all">全部账号</Option>
              <Option value="account1">小红书用户1</Option>
              <Option value="account2">小红书用户2</Option>
            </Select>
          </Col>
          <Col span={8}>
            <span style={{ marginRight: 8 }}>时间范围:</span>
            <RangePicker
              value={[dayjs(dateRange[0]), dayjs(dateRange[1])]}
              onChange={(dates) => {
                if (dates) {
                  setDateRange([dates[0]?.format('YYYY-MM-DD') || '', dates[1]?.format('YYYY-MM-DD') || '']);
                }
              }}
            />
          </Col>
        </Row>
      </Card>

      {/* 关键指标 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={4}>
          <Card>
            <Statistic
              title="总粉丝数"
              value={totalFollowers}
              prefix={<UserOutlined />}
              suffix={
                <span style={{ fontSize: '12px', color: followersGrowth >= 0 ? '#52c41a' : '#ff4d4f' }}>
                  {followersGrowth >= 0 ? '+' : ''}{followersGrowth.toFixed(1)}%
                </span>
              }
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="发布笔记"
              value={totalPosts}
              prefix={<EyeOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="总点赞"
              value={totalLikes}
              prefix={<HeartOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="总评论"
              value={totalComments}
              prefix={<MessageOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="总分享"
              value={totalShares}
              prefix={<ShareAltOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="平均互动率"
              value={((totalLikes + totalComments + totalShares) / totalPosts / totalFollowers * 100).toFixed(2)}
              suffix="%"
              precision={2}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card title="粉丝增长趋势">
            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
              图表组件待安装 @ant-design/plots
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="内容分类分布">
            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
              图表组件待安装 @ant-design/plots
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={24}>
          <Card title="互动数据趋势">
            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
              图表组件待安装 @ant-design/plots
            </div>
          </Card>
        </Col>
      </Row>

      {/* 热门内容 */}
      <Card title="热门内容排行">
        <Table
          columns={columns}
          dataSource={topPosts}
          rowKey="id"
          pagination={false}
        />
      </Card>
    </div>
  );
};

export default Analytics; 